<template>
  <div class="chart">
    <el-card>
      <ul class="chart-top">
        <li class="cheat-item">
          <div class="circle">{{ list.increment_users }}</div>
          <div class="txt">今日新增用户</div>
        </li>
        <li class="cheat-item">
          <div class="circle">{{ list.total_users }}</div>
          <div class="txt">总用户量</div>
        </li>
        <li class="cheat-item">
          <div class="circle">{{ list.increment_questions }}</div>
          <div class="txt">新增试题</div>
        </li>
        <li class="cheat-item">
          <div class="circle">{{ list.total_questions }}</div>
          <div class="txt">总试题量</div>
        </li>
        <li class="cheat-item">
          <div class="circle">{{ list.total_done_questions }}</div>
          <div class="txt">总刷题量</div>
        </li>
        <li class="cheat-item">
          <div class="circle">{{ list.personal_questions }}</div>
          <div class="txt">人均刷题量</div>
        </li>
      </ul>
    </el-card>
    <el-card>
      <div style="width: 100%; height: 400px" ref="echarts"></div>
    </el-card>
  </div>
</template>

<script>
import { dataTitle, dataStatistics } from '@/api/chart.js'
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      info: '',
      myEcharts: '',
      list: [],
      nameArr: []
    }
  },
  async created () {
    const res = await dataTitle()
    this.list = res.data.data
    console.log('chart数据:', res)
    dataStatistics().then((res) => {
      this.info = res.data.data
      console.log('echarts:', res)
      /*
        生成一个新数组,新数组每一项就是它map内部return的每一项
            */
      this.nameArr = this.info.map((item) => {
        return item.name
      })
      this.myEcharts = echarts.init(this.$refs.echarts)
      const option = {
        title: {
          text: '整体数据', // 主标题
          // subtext: '纯属虚构', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          data: this.nameArr
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.info
          }
        ]
      }
      this.myEcharts.setOption(option)
      console.log('nameArr', this.nameArr)
    })
  }
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
.chart {
  .chart-top {
    height: 160px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .cheat-item {
      .circle {
        border: 2px solid green;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 50%;
      }
      .txt {
        text-align: center;
      }
    }
  }
}
</style>
